<template>
  <view class='container'>
    <uni-icons type="contact-filled" class='icon' size='100' color='#ddd'></uni-icons>
    <button class="login" type='primary' @click="getUserInfo">一键登录</button>
    <text class="tip">登陆后尽享更多权益</text>
  </view>
</template>

<script>
  import {mapMutations,mapState} from 'vuex';
  import {login} from '../../api/api.js';
  export default {
    name:"my-login",
    data() {
      return {
        
      };
    },
    computed:{
      ...mapState('user',['redirectInfo']),
    },
    methods:{
      ...mapMutations('user',['UPDATEUSERINFO','UPDATETOKEN','UPDATEREDIRECINFO']),
      async getToken(info){
        // 获取code值
        const [err,res]=await uni.login().catch(err=>err);
        if(err||res.errMsg!='login:ok'){
          return uni.$showMsg('用户登录失败');
        }
        const query={
          code:res.code,
          encryptedData:info.encryptedData,
          iv:info.iv,
          rawData:info.rawData,
          signature:info.signature
        };
        let loginRes=await login(query);
        if(loginRes.data.meta.status!==200) {
          if(this.redirectInfo&&this.redirectInfo.openType=='switchTab'){
            uni.switchTab({
              url:this.redirectInfo.from,
              complete: () => {
                this.UPDATEREDIRECINFO(null)
              }
            })
          }
          this.UPDATETOKEN('12345432123456');
          return uni.$showMsg('登录失败||成功')
        }
        uni.$showMsg('登录成功！')
        this.UPDATETOKEN(loginRes.data.message.token);
      },
      // 获取用户的基本信息
      getUserInfo(){
        uni.getUserProfile({
          desc:'请求授权信息',
          success:(res)=> {
            this.UPDATEUSERINFO(res.userInfo)
            this.getToken(res);
          },
          fail(res) {
            uni.$showMsg('您取消了授权');
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page{
    height: 100%;
  }
.container{
  padding-top: 250rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  &::after{
    content:' ';
    display: block;
    width: 100%;
    height: 40px;
    background-color: #f5f5f5;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 100%;
    transform: translateY(50%);
  }
  .icon{
    
  }
  .login{
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #c00000;
  }
  .tip{
    font-size: 13px;
    color: gray;
    margin-bottom: 65px;
  }
}
</style>